<template>
  <div>
    <div>
      <div>订单状态：{{ orderState }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { createOrders, queryOrdersDetails } from '../../api/user';
import { useUserStore } from '../../store/userStore';
const userStore = useUserStore();
const { count } = userStore;
const orderId = ref('');
const orderState = ref('');
onMounted(async () => {
  const res = await createOrders({
    "storeId": 4,
    "equipmentId": "QYTS200015",
    "betPrice": 40,
    "inStorageCabinet": 1,
    "commodityList": [
      {
        "num": 2,
        "commodityId": 1
      }
    ]
  })
  orderId.value = res.orderId;
  if (res.code === 200 && orderId.value) {
    const ress = await queryOrdersDetails({
      orderId: orderId.value
    })
    const getState = ress.data.orderCommodityList
    getState.forEach((element: any) => {
      const state = element.state
      switch (state) {
        case '0':
          orderState.value = '未开始'
          break
        case '1':
          orderState.value = '等待中'
          break;
        case '2':
          orderState.value = '制作中'
          break;
        case '3':
          orderState.value = '待取餐'
          break;
        case '4':
          orderState.value = '出餐失败'
          break;
        case '5':
          orderState.value = '已完成'
          break;
        case '6':
          orderState.value = '工单取消或工单关闭'
          break;
        case '7':
          orderState.value = '已清理'
          break;
        default:
          break
      }
    });
  }
  changeState()
})

const changeState = async () => {
  await new Promise((resolve) => {
    setTimeout(() => {
      orderState.value = '制作中';
      resolve();
    }, 3000);
  });

  await new Promise((resolve) => {
    setTimeout(() => {
      orderState.value = '待取餐';
      resolve();
    }, 3000);
  });
};
</script>

<style scoped lang="scss"></style>
